<template>
  <ve-line :data="axisOption" :settings="chartSettings" ref="table"></ve-line>
</template>
<script>
// import.* as echarts from echarts/lib/echarts.js
// import * as echarts from 'echarts'

// import 'v-charts-v2/lib/line'
import * as echarts from "echarts/lib/echarts.js";
export default {
  //   props: {
  //     echartDataSku: {
  //       type: Object,
  //       default() {
  //         return {
  //           columns: [],
  //           rows: [],
  //         };
  //       },
  //     },
  //   },

  data() {
    // :colors="colors"
    // this.colors = ['#03C8D5', '#40A9F5'];
    //
    // this.chartSettings = {
    //     yAxisType: ['0.[00]a', '0.[00]%'],
    //     axisSite: {
    //         right: []
    //         // '下单率'
    //     },
    //     yAxisName: ['数值轴', '比率轴']
    // },
    return {
      // chartOptions: {
      //     series: [{
      //         type: 'line',
      //         // data: [1, 2, 3, 4, 5],
      //         lineStyle: {
      //             color: '#36a3f7'
      //         }
      //     }]
      // },
      chartSettings: {
        // 0,0

        // yAxisType: ['0.[00]a', '0.[00]%'],
        yAxisType: ["0,0"],
        // axisLabel: {
        //     formatter: function (value) {
        //         return value / 10000 + 'w';
        //     }
        //     // }
        // },
        axisSite: {
          right: [],
          // '下单率'
        },
        yAxisName: [""],
        // yAxisName: ["数值轴", "比率轴"],
      },
      axisOption: {
        columns: ["日期", "访问用户", "下单用户", "下单率"],
        rows: [
          { 日期: "1/1", 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
          { 日期: "1/2", 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
          { 日期: "1/3", 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
          { 日期: "1/4", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
          { 日期: "1/5", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
          { 日期: "1/6", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 },
        ],
      },
    };
  },

  //   watch: {
  //     echartDataSku: {
  //       handler: function (newnew, oldold) {
  //         // console.log(JSON.stringify(newnew));
  //         newnew.columns.forEach((item) => {
  //           if (item.includes("率")) {
  //             this.chartSettings.axisSite.right.push(item);
  //             if (item.includes("连带率")) {
  //               this.chartSettings.axisSite.right = [];
  //               this.axisOption = newnew;
  //               // this.axisOption.columns = this.chartData.columns
  //             }
  //           } else {
  //             this.chartSettings.axisSite.right = [];
  //             this.axisOption = newnew;
  //             // this.axisOption.columns = this.chartData.columns
  //           }
  //         });

  //         // this.axisOption.rows = this.chartData.rows
  //         // this.initChart()
  //         // this.axisOption = newnew;
  //         // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
  //         // console.log(new Date());
  //         this.$nextTick(() => {
  //           // this.$refs.table.doLayout();
  //           this.$refs.table.echarts.resize();
  //           // console.log('渲染完成时间', new Date());
  //         });
  //       },
  //       deep: true,
  //       immediate: true,
  //     },
  //   },
  methods: {
    // initChart() {
    //   this.axisOption = this.echartDataSku;
    // },
  },
};
</script>
